<template>
  <div class="base64-tool">
    <h1>Base64编码和解码工具</h1>
    <div class="feature-group">
      <label class="feature-label">使用场景:</label>
      <ul class="feature-list">
        <li class="feature-item">Base64编码: 将文本内容或二进制内容转换为Base64字符串</li>
        <li class="feature-item">Base64解码: 将Base64字符串转换为文本内容或二进制内容</li>
      </ul>
    </div>
    <div class="input-group">
      <label for="inputContent">输入内容:</label>
      <textarea id="inputContent" v-model="inputContent" placeholder="输入要编码或解码的内容"></textarea>
    </div>
    <div class="button-group">
      <button class="convert-button encode-button" @click="encode">Base64编码</button>
      <button class="convert-button decode-button" @click="decode">Base64解码</button>
      <button class="convert-button swap-button" @click="swapContent">交换内容</button>
      <button class="convert-button clear-button" @click="clearContent">清空内容</button>
      <button class="convert-button copy-button" @click="copyResult">复制结果</button>
    </div>
    <div class="output-group">
      <label for="outputContent">输出内容:</label>
      <textarea id="outputContent" v-model="outputContent" readonly placeholder="输出结果"></textarea>
    </div>
  </div>
</template>

<script setup>
const inputContent = ref('');
const outputContent = ref('');

const encode = () => {
  try {
    // 将输入内容转换为Latin1范围内的字节数组
    const encoder = new TextEncoder();
    const uint8Array = encoder.encode(inputContent.value);
    // 使用btoa进行编码
    outputContent.value = btoa(String.fromCharCode.apply(null, uint8Array));
  } catch (error) {
    outputContent.value = '编码失败: ' + error.message;
  }
};

const decode = () => {
  try {
    // 使用atob进行解码
    const decodedString = atob(inputContent.value);
    // 将解码后的字节数组转换回字符串
    const decoder = new TextDecoder();
    const uint8Array = new Uint8Array(decodedString.split('').map(char => char.charCodeAt(0)));
    outputContent.value = decoder.decode(uint8Array);
  } catch (error) {
    outputContent.value = '无效的Base64字符串';
  }
};

const swapContent = () => {
  const temp = inputContent.value;
  inputContent.value = outputContent.value;
  outputContent.value = temp;
};

const clearContent = () => {
  inputContent.value = '';
  outputContent.value = '';
};

const copyResult = () => {
  if (outputContent.value) {
    navigator.clipboard.writeText(outputContent.value).then(() => {
      alert('结果已复制到剪贴板');
    }).catch(err => {
      alert('复制失败: ' + err.message);
    });
  } else {
    alert('没有可复制的内容');
  }
};

onMounted(() => {
  inputContent.value = 'Hello, world!';
});

</script>

<style scoped>
.base64-tool {
  font-family: Arial, sans-serif;
  max-width: 1000px;
  width: calc(100% - 60px);
  margin: 40px auto 10px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.base64-tool h1 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  color: #17a2b8;
}

.input-group, .output-group {
  margin: 20px 0;
}

.input-group label, .output-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

textarea {
  width: calc(100% - 15px);
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  background-color: #fff;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.convert-button {
  margin: 0 10px;
  padding: 10px 20px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.encode-button {
  background-color: #007bff;
}

.encode-button:hover {
  background-color: #0056b3;
}

.decode-button {
  background-color: #28a745;
}

.decode-button:hover {
  background-color: #218838;
}

.swap-button {
  background-color: #ffc107;
}

.swap-button:hover {
  background-color: #d39e00;
}

.clear-button {
  background-color: #dc3545;
}

.clear-button:hover {
  background-color: #c82333;
}

.copy-button {
  background-color: #6c757d;
}

.copy-button:hover {
  background-color: #545b62;
}

.feature-group {
  margin-bottom: 20px;
}

.feature-label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
  border-left: 4px solid #17a2b8;
  padding-left: 10px;
}

.feature-list {
  margin: 0;
  padding: 20px;
  border-radius: 4px;
}

.feature-item {
  margin: 0 0 8px 20px;
  font-size: 14px;
  line-height: 1.5;
  list-style-type: disc; /* 列表符号 */
}

.feature-list::marker {
  color: #007bff; /* 圆点颜色 */
  font-size: 16px; /* 圆点大小 */
}

/* 如果你有具体的列表内容，可以在这里添加 */
.feature-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none; /* 先去掉默认样式 */
}

.feature-list ul li::before {
  content: '•'; /* 添加圆点 */
  color: #007bff; /* 圆点颜色 */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 16px; /* 圆点大小 */
}
@media (max-width: 576px) {
  .button-group {
    font-size: 12px;
  }
  .convert-button {
    padding: 8px 14px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .button-group {
    flex-direction: column;
  }
  .convert-button {
    margin: 10px 0;
  }
}
</style>
